<template>
    <view class="qiun-columns">
        <canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA" @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
        <!--<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts"></canvas>-->
    </view>
</template>

<script>
    import uCharts from '@/components/u-charts/u-charts.min.js';
    import {CommonUtil} from "@/dev/core/utils/common.util";

    var _self;
    var canvaLineA = null;
    var lastMoveTime = null;//最后执行移动的时间戳
    export default {
        data() {
            return {
                cWidth: '',
                cHeight: '',
                pixelRatio: 1,
                textarea: '',
                Interactive: '',//交互显示的数据
            }
        },
        onLoad() {
            _self = this;
            //#ifdef MP-ALIPAY
            uni.getSystemInfo({
                success: function (res) {
                    if (res.pixelRatio > 1) {
                        //正常这里给2就行，如果pixelRatio=3性能会降低一点
                        //_self.pixelRatio =res.pixelRatio;
                        _self.pixelRatio = 2;
                    }
                }
            });
            //#endif
            this.cWidth = uni.upx2px(750);
            this.cHeight = uni.upx2px(500);
            this.getServerData();
        },
        methods: {
            getServerData() {
                let data = {
                    "success": true,
                    "data": {
                        "LineA": {
                            "categories": ["2012", "2013", "2014", "2015", "2016", "2017"],
                            "series": [
                                {
                                    "name": "成交量A",
                                    "data": [35, 8, 25, 37, 4, 20]
                                },
                                {
                                    "name": "成交量B",
                                    "data": [70, 40, 65, 100, 44, 68]
                                },
                                {
                                    "name": "成交量C",
                                    "data": [100, 80, 95, 150, 112, 132]
                                }
                            ]
                        },
                    }
                };
                let res = {data: data};


                console.log(res.data.data)
                let LineA = {categories: [], series: []};
                //这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
                LineA.categories = res.data.data.LineA.categories;
                LineA.series = res.data.data.LineA.series;

                //第二根线为虚线的设置
                LineA.series[1].lineType = 'dash';
                LineA.series[1].dashLength = 10;
                _self.textarea = JSON.stringify(res.data.data.LineA);
                _self.showLineA("canvasLineA", LineA);
            },
            showLineA(canvasId, chartData) {
                canvaLineA = new uCharts({
                    $this: _self,
                    canvasId: canvasId,
                    type: 'line',
                    colors: ['#facc14', '#f04864', '#8543e0', '#90ed7d'],
                    fontSize: 11,
                    padding: [15, 15, 0, 15],
                    legend: {
                        show: true,
                        padding: 5,
                        lineHeight: 11,
                        margin: 0,
                    },
                    dataLabel: false,
                    dataPointShape: true,
                    background: '#FFFFFF',
                    pixelRatio: _self.pixelRatio,
                    categories: chartData.categories,
                    series: chartData.series,
                    animation: true,
                    xAxis: {
                        type: 'grid',
                        gridColor: '#CCCCCC',
                        gridType: 'dash',
                        dashLength: 8,
                        //disableGrid:true
                    },
                    yAxis: {
                        gridType: 'dash',
                        gridColor: '#CCCCCC',
                        dashLength: 8,
                    },
                    width: _self.cWidth * _self.pixelRatio,
                    height: _self.cHeight * _self.pixelRatio,
                    extra: {
                        line: {
                            type: 'straight'
                        }
                    }
                });

            },
            touchLineA(e) {
                lastMoveTime = Date.now();
            },
            moveLineA(e) {
                let currMoveTime = Date.now();
                let duration = currMoveTime - lastMoveTime;
                if (duration < Math.floor(1000 / 60)) return;//每秒60帧
                lastMoveTime = currMoveTime;

                let currIndex = canvaLineA.getCurrentDataIndex(e);
                if (currIndex > -1 && currIndex < canvaLineA.opts.categories.length) {
                    let riqi = canvaLineA.opts.categories[currIndex];
                    let leibie = canvaLineA.opts.series[0].name;
                    let shuju = canvaLineA.opts.series[0].data[currIndex];
                    this.Interactive = leibie + ':' + riqi + '-' + shuju + '元';
                }
                canvaLineA.showToolTip(e, {
                    format: function (item, category) {
                        return category + ' ' + item.name + ':' + item.data
                    }
                });
            },
            touchEndLineA(e) {
                let currIndex = canvaLineA.getCurrentDataIndex(e);
                if (currIndex > -1 && currIndex < canvaLineA.opts.categories.length) {
                    let riqi = canvaLineA.opts.categories[currIndex];
                    let leibie = canvaLineA.opts.series[0].name;
                    let shuju = canvaLineA.opts.series[0].data[currIndex];
                    this.Interactive = leibie + ':' + riqi + '-' + shuju + '元';
                }
                canvaLineA.touchLegend(e);
                canvaLineA.showToolTip(e, {
                    format: function (item, category) {
                        return category + ' ' + item.name + ':' + item.data
                    }
                });
            },
            changeData() {
                if (CommonUtil.isJSON(_self.textarea)) {
                    let newdata = JSON.parse(_self.textarea);
                    canvaLineA.updateData({
                        series: newdata.series,
                        categories: newdata.categories
                    });
                } else {
                    uni.showToast({
                        title: '数据格式错误',
                    })
                }
            }
        }
    }
</script>

<style>
    .charts {
        width: 500px;
        height: 500px;
        background-color: #FFFFFF;
    }
</style>
